<template>
<!--  TODO 在线预览 -->
  <el-dialog v-model="drawer" width="80%" :append-to-body="true" @close="close" center>
    <div style="height: 650px">
      <iframe v-if="isShow" :src="src" style="width: 100%;height: 100%"/>
    </div>
  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs} from "vue";
import { Base64 } from 'js-base64';

export default {
  name: "OnlinePreview",
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    fileData: {
      type: Object,
      default: null
    },
  },
  emits: ["update:dialogDrawer"],
  setup(props, context) {
    const {dialogDrawer, fileData} = toRefs(props)
    let drawer = computed({
      get: () => {
        if (dialogDrawer.value){
          state.src = "http://115.159.5.99:8012/onlinePreview?url=" + encodeURIComponent(Base64.encode(fileData.value.fileVisitSite))
          state.isShow = true
        }
        return dialogDrawer.value;
      },
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })
    const state = reactive({
      isShow:false,
      src:''
    })

    //关闭
    const close = () => {
      state.isShow = false
      context.emit('update:dialogDrawer', false)
    }

    return {
      ...toRefs(state),
      drawer,
      dialogDrawer,
      fileData,
      close,

    }
  }


}
</script>

<style scoped>

</style>
